<template>
  <div>
    <el-container>
      <el-header class="header">
        欢迎 <span class="red">{{}}</span> 同学
        <span class="fr cur_p" @click="layout">退出</span>
        <span class="fr red mr20 cur_p">个人中心</span>
      </el-header>
      <el-main class="main">
        <div class="sub-btn"><el-button v-for="(item, index) in subject" :key="item" type="primary" @click="touchSubject(item, index)">{{item}}</el-button></div>
        <article class="art">
          <div class="carousel">
            <el-carousel autoplay height="450px">
              <el-carousel-item v-for="(item, i) in imgList" :key="i">
                <el-image fit="contain" :src="item" @click="touchImage(i)" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="list">
            <div class="title">排行榜</div>
            <div v-for="(ranks, index) in rankingList" :key="ranks" class="ranks cur_p pt20 line2" @click="touchRank(index)">
              {{ranks}}
            </div>
          </div>
        </article>
        <div class="dongcidaci mt20"></div>
      </el-main>
      <!-- <el-footer class="footer">此作品为201810089293，18计科6班幸子焘毕业设计</el-footer> -->
    </el-container>
  </div>
</template>

<script>
const subject = ['语文', '数学', '英语', '物理', '地理', '生物', '化学', '政治', '历史', '体育', '美术']
export default {
  data() {
    return {
      subject,
      imgList: [],
      rankingList: []
    }
  },
  mounted() {
    this.fullImg(0)
    console.log(this.subject)
  },
  methods: {
    layout() {
      this.toWhere('Login')
    },
    touchSubject(item, index) {
      this.fullImg(index)
    },
    fullImg(index) {
      this.imgList = []
      this.rankingList = []
      switch (index) {
        case 0:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          this.rankingList.push('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊', '语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，语文第二期，', '呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃')
          break
        case 1:
          this.imgList.push(require('../../assets/image/2-1.png'))
          this.imgList.push(require('../../assets/image/2-2.png'))
          this.imgList.push(require('../../assets/image/2-3.png'))
          break
        case 2:
          this.imgList.push(require('../../assets/image/3-1.png'))
          this.imgList.push(require('../../assets/image/3-2.png'))
          this.imgList.push(require('../../assets/image/3-3.png'))
          break
        case 3:
          this.imgList.push(require('../../assets/image/4-1.png'))
          this.imgList.push(require('../../assets/image/4-2.png'))
          this.imgList.push(require('../../assets/image/4-3.png'))
          break
        case 4:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
        case 5:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
        case 6:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
        case 7:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
        case 8:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
        case 9:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
        case 10:
          this.imgList.push(require('../../assets/image/1-1.png'))
          this.imgList.push(require('../../assets/image/1-2.png'))
          this.imgList.push(require('../../assets/image/1-3.png'))
          break
      }
    },
    touchImage(i) {
      console.log(i)
    },
    touchRank(i) {
      console.log(i)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #eee;
  height: 50px;
  padding: 20px;
}
.main {
  padding: 20px 80px 60px;
  .sub-btn {
    display: flex;
    justify-content: space-between;
  }
  .art {
    padding-top: 30px;
    display: flex;
    justify-content: flex-start;
  }
  .carousel {
    width: 750px;
    background-color: transparent;
  }
  .list {
    width: 400px;
    margin-left: 100px;
    .title {
      width: 100%;
      text-align: center;
    }
  }
}
  .dongcidaci {
    height: 60px;
    width: 100%;
    background-size: contain;
    background-image: url('../../assets/image/6.gif');
  }
  .ranks {
    text-decoration: underline;
    &:hover {
      color: blue;
    }
  }
</style>
